<!-- Author:Rain -->
<!-- 做表单项的组件 -->
<template>
<div class="form-item">
    <rainInput @sendInput="response" title="真实姓名" placeholder="请填写你的名字" value="xiaoyu"/>
    <RainSelect @sendSelect="response" title="你的名字" :options="[`小雨`,`小柔`,`哈哈`,`欲雨`]" placeholder="请在这里填写上你的小名" />
    <RainTime @sendTime="response" title="毕业时间" :value="{year:2025,month:6}"/>
    <RainPosCity type="pos" @sendInput="response" title="期望职位" value="Web前端开发" placeholder="你期望的职位"/>
    <RainPosCity type="city" @sendInput="response" title="期望工作城市" value="杭州" placeholder="你期望的工作城市"/>
    <RainRadio :option="['男','女']" :value="1" title="性别"/>
    <RainMultiplySelect @sendSelect="response" title="期望薪资" type="freshGraduate"/>
    <RainMultiplySelect @sendSelect="response" title="期望薪资" type="trainee"/>
</div>   
<div class="other">
    <RainText title="你的个人优势" placeholder="用1～2句话向Boss快速介绍自己，您可以总结一下之前的工作成果，也可以向 boss 展示您擅长的工作技能和方向" value="luoyu"/>
</div>
</template>

<script setup lang="ts">
import rainInput from "./Rain-input.vue"
import RainSelect from "./Rain-select.vue";
import RainTime from "./Rain-time.vue";
import RainPosCity from "./Rain-pos-city.vue";
import RainRadio from "./Rain-radio.vue";
import RainText from "./Rain-text.vue";
import RainMultiplySelect from "./Rain-multiply-select.vue";

function response(val:string){
    console.log(val);
    
}



</script>

<style scoped>
.form-item{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    height: 200px;
    margin: 60px;
    gap: 0 60px;
    grid-auto-rows: 300px;
}
.other{
    margin-top: 700px;
    padding: 50px 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>